<template>
  <div style="width: 1200px;margin: auto">
    <AddHead/>

    <el-tabs :tab-position="tabPosition" style="height: 1565px;margin-top: 20px;">
      <el-tab-pane label="男生排行榜" :disabled="true" class="box-font" style="color: red"></el-tab-pane>
      <el-tab-pane label="畅销榜" >
        <span style="font-size: 30px">畅销榜</span>
        <span style="font-size: 12px">上架30天内销量日排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 1500px;">
          <el-tab-pane label="上架30天内">
            <div style="margin-top:10px;margin-left: 10px" v-for="(n,index) in 10" :key="index">
              <div class="img-cir" style="margin-top: 15px">
                <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/933/45335933/b_45335933.jpg" >
              </div>
              <div class="eom">
                <p style="">开局平躺，截胡五星女帝老婆</p>
                <p style="font-size: 14px;height: 35px;" class="yc">陆远穿越到了一片修仙世界，获得了一个星级标签系统。早餐店卖油条的大叔是两星半，★★☆。标签是【圆滑】【贪财】起初陆远还不知道这系统怎么用才最好，直到陆远看到了一个女人。★★★★★【天下第一绝美】【忠贞不渝】【勤俭持家】【冰清玉洁】【贤妻良母】……一连串的标签给陆远看傻了，当陆远顺着往下看到【女帝】标签时，陆远觉得自己的人生可以躺平了。</p>
                <p style="font-size: 12px">三关绝尘●东方玄幻●连载●45.5万字</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="上架120天内">配置管理</el-tab-pane>
          <el-tab-pane label="上架300天内">角色管理</el-tab-pane>
          <el-tab-pane label="上架300天以上">定时任务补偿</el-tab-pane>
          <el-tab-pane label="全部书籍">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="新书榜">
        <span style="font-size: 30px">新书榜</span>
        <span style="font-size: 12px">免费新书人气排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="日榜"></el-tab-pane>
          <el-tab-pane label="周榜"></el-tab-pane>
          <el-tab-pane label="月榜"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="免费榜">
        <span style="font-size: 30px">免费榜</span>
        <span style="font-size: 12px">7天内人气排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label=""></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="完结榜">
        <span style="font-size: 30px">完结榜</span>
        <span style="font-size: 12px">完结书人气排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="周榜"></el-tab-pane>
          <el-tab-pane label="月榜"></el-tab-pane>
          <el-tab-pane label="总榜"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="封神榜">
        <span style="font-size: 30px">封神榜</span>
        <span style="font-size: 12px">2021封神榜</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="2021"></el-tab-pane>
          <el-tab-pane label="2020"></el-tab-pane>
          <el-tab-pane label="2019"></el-tab-pane>
          <el-tab-pane label="2018"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="女生排行榜" :disabled="true" class="box-font"></el-tab-pane>
      <el-tab-pane label="畅销榜">
        <span style="font-size: 30px">畅销榜</span>
        <span style="font-size: 12px">上架30天内销量日排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="上架30天内">畅销榜</el-tab-pane>
          <el-tab-pane label="上架120天内">配置管理</el-tab-pane>
          <el-tab-pane label="上架300天内">角色管理</el-tab-pane>
          <el-tab-pane label="上架300天以上">定时任务补偿</el-tab-pane>
          <el-tab-pane label="全部书籍">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="新书榜">
        <span style="font-size: 30px">新书榜</span>
        <span style="font-size: 12px">免费新书人气排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="周榜"></el-tab-pane>
          <el-tab-pane label="月榜"></el-tab-pane>
          <el-tab-pane label="总榜"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="免费榜">
        <span style="font-size: 30px">免费榜</span>
        <span style="font-size: 12px">上架30天内销量日排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label=""></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="完结榜">
        <span style="font-size: 30px">完结榜</span>
        <span style="font-size: 12px">完结书人气排行</span>
        <el-tabs :tab-position="stabPosition" style="height: 200px;">
          <el-tab-pane label="周榜"></el-tab-pane>
          <el-tab-pane label="月榜"></el-tab-pane>
          <el-tab-pane label="总榜"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <div class="block" style="width: 800px;height: 100px; margin: auto;text-align: center;">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000">
        </el-pagination>
      </div>
    </el-tabs>

    <AddTail/>
  </div>

</template>

<script>
export default {
  name: "RankingList",
  data() {
    return {
      tabPosition: 'left',
      stabPosition: 'top',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>

<style scoped>

.box-font{
  font-size: 18px;
  color:#2c3e50;

}
.img-cir{
  width: 88px;
  height: 125px;
  overflow: hidden;
  float: left;
  border-radius: 10px;

}
img{
  width: 100%;
  height: 100%;
  transition: all 0.6s;
  cursor: pointer;
  float: left;
}
img:hover{
  transform: scale(1.2);
}
.yc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.eom{
  margin-top: -135px;
  margin-left: 110px;
  float: left;
}
</style>
